<script setup lang="ts">
/**
 * 上方的：头像信息，包含头像，名字，等级和经验条
 */
import headLogoImg from "./img/head-logo.png"
import ProgressBar from "@/views/qq/home/home-top/HeadInfo/ProgressBar.vue";
import {pushTo} from "@/router";
import {RouterName} from "@/utils/enum-type";
</script>
<template>
  <div class="head">
    <div class="flex-left">
      <img :src="headLogoImg" alt="" class="head-img" @click="pushTo({name:RouterName.Home})"/>
    </div>
    <div class="flex-right">
      <p class="name">春江花月夜</p>
      <ProgressBar height="0.6em" :percent="62922/111800*100"/>
      <div class="rank">
        <p class="rank-level">LV80</p>
        <p class="rank-number">62922/111800</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.head {
  display: flex;

  .flex-left {
    margin-right: 0.4em;

    .head-img {
      cursor: pointer;
      height: 4em;
      border-radius: 50%;
    }
  }

  .flex-right {
    > * + * {
      margin-top: 0.2em;
    }

    .name {
      font-size: 1.2em;
      font-weight: bold;
    }

    .rank {
      display: flex;
      justify-content: center;
      align-items: center;

      .rank-level {
        color: #f5f670;
        font-size: 0.9em;
        font-weight: bold;
        margin-right: 2em;
      }

      .rank-number {
        font-size: 0.8em;
        margin-left: auto;
      }
    }
  }
}

</style>